<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>首页</title>
	<link th:href="@{/js/jquery.js}" rel="stylesheet" />
	<script th:href="@{/css/bootstrap.min.css}"  ></script>
	<script th:href="@{/js/bootstrap.min.js}"  ></script>
	<script src="js/echarts.js"></script>
</head>
<style type="text/css">
	#right{
		position: absolute;
		top: 80px;
		left:450px;
		width:1000px
	}
	table{

	}
	td{
		text-align: center;
	}
	.option{
		text-align: center;
	}
</style>
<body>
<div th:replace="Top :: head"></div>
<div th:replace="Top :: left"></div>
<div id="right">
<div id="rightbox1" style="width: 600px;height:400px;">
</div>
<div id="rightbox2" style="width: 600px;height:400px;">
</div>
</div>
</body>
</html>
<script>
	var  dataList=[];
	var dataList2=[];
	var dataList3=[];
	$.ajax({
		type: 'get',
		url: "/getsex",
	}).then((data) => {
		dataList=data

	}).then(()=>{
		let chartDom = document.getElementById('rightbox1');
		let myChart = echarts.init(chartDom);
		let option;

		option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			series: [
				{
					name: '公司男女比例',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: dataList
				}
			]
		};

		myChart.setOption(option);

	}).then(()=>{
		$.ajax({
			type: 'get',
			url: "/getdepartment",
		}).then((data) => {
			dataList2=data.department;
			dataList3=data.departmentnum;

		}).then(()=>{
			var chartDom = document.getElementById('rightbox2');
			var myChart = echarts.init(chartDom);
			var option;

			option = {
				xAxis: {
					type: 'category',
					data: dataList2
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: dataList3,
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			};

			myChart.setOption(option);

		});
	})


</script>